<script setup lang="ts">
import type { PlusColumn, PageInfo } from "plus-pro-components";
import { reactive, onMounted } from "vue";
import { useTable } from "plus-pro-components";
import $request from "../request";

const { tableData, total, pageInfo } = useTable();

// 状态参数
const state = reactive({
  tableEmptyText: "",
  isLoading: false
});

// 表格数据
const tableColumns: PlusColumn[] = [
  {
    label: "详情",
    prop: "summary",
    minWidth: 200,
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "IP 地址",
    prop: "ipAddress",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    width: 150
  },
  {
    label: "地点",
    prop: "ipLocation",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    width: 200
  },
  {
    label: "操作系统",
    width: 120,
    prop: "userAgent.system",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "浏览器",
    width: 120,
    prop: "userAgent.browser",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "创建时间",
    width: 150,
    prop: "createTime",
    valueType: "date-picker",
    tableColumnProps: {
      align: "center"
    },
    fieldProps: {
      format: "YYYY-MM-DD HH:mm"
    }
  }
];

pageInfo.value.pageSize = 10;

// 获取列表
const getList = async () => {
  state.isLoading = true;
  try {
    const { data, total: dataTotal } = await $request.get.logsPageList(
      pageInfo.value
    );
    state.tableEmptyText = "资料暂无";
    tableData.value = data;
    total.value = dataTotal;
  } catch (error) {
    state.tableEmptyText = error.message;
  } finally {
    state.isLoading = false;
  }
};

// 翻页
const handlePaginationChange = (_pageInfo: PageInfo): void => {
  pageInfo.value = _pageInfo;

  getList();
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div>
    <plus-table
      :columns="tableColumns"
      :table-data="tableData"
      :empty-text="state.tableEmptyText"
      :loading-status="state.isLoading"
      has-index-column
      :title-bar="false"
      :border="false"
      :stripe="true"
      :highlight-current-row="false"
      :pagination="{
        total,
        modelValue: pageInfo,
        pageSizeList: [10, 20, 50],
        size: 'small',
        align: 'right',
        background: true,
        layout: 'prev, pager, next'
      }"
      @paginationChange="handlePaginationChange"
    />
  </div>
</template>

<style lang="scss" scoped>
//
</style>
